<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>教师与运营首页</title>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <link rel="stylesheet" href="/css/index/systemHome/systemHome/index-welcome.css"/>

</head>
<body>
<div class="box">
    <!--用户列表-->
    <div class="list">
        <div class="list-left">
            <div class="list-left-left"></div>
            <p class="list-left-right">教师与运营首页</p>
        </div>
        <div class="list-right">
            <div class="list-right-left layui-btn layui-icon layui-icon-refresh" onclick="refresh()">&nbsp;刷新</div>
        </div>
    </div>
    <div class="box1">
        <div>
            <table>
                <tr>
                    <td class="table-tr-td">
                        <a>
                            <div class="list2" style="border: 1px #DCDCDC solid; width: 290px; height: 100px;">
                                <div style="height: 50px; width: 50px; float: left; margin-left: 20px;margin-top: 20px"><i style="font-size: 60px; color: #1ABC9C; " class="layui-icon layui-icon-upload"></i></div>
                                <div style="align-content: center; float: left; margin-left:40px; margin-top: 35px;">
                                    <p>上传视频总数</p>
                                    <p id="TotalVideoOverhead"></p>
                                </div>
                            </div>
                        </a>
                    </td>
                    <td class="table-tr-td" >
                        <a>
                            <div class="list2" style="border: 1px #DCDCDC solid; width: 290px; height: 100px;margin-left: 44px">
                                <div style="height: 50px; width: 50px; float: left; margin-left: 20px;margin-top: 20px"><i style="font-size: 60px; color: #1ABC9C; " class="layui-icon layui-icon-read"></i></div>
                                <div style="align-content: center; float: left; margin-left:40px; margin-top: 35px;">
                                    <p>视频点赞总数</p>
                                    <p id="TotalVideoLikes"></p>
                                </div>
                            </div>
                        </a>
                    </td>
                    <td class="table-tr-td">
                        <a>
                            <div class="list2" style="border: 1px #DCDCDC solid; width: 290px; height: 100px;margin-left: 44px">
                                <div style="height: 50px; width: 50px; float: left; margin-left: 20px;margin-top: 20px"><i style="font-size: 60px; color: #1ABC9C; " class="layui-icon layui-icon-star"></i></div>
                                <div style="align-content: center; float: left; margin-left:40px; margin-top: 35px;">
                                    <p>上架商品总量</p>
                                    <p id="TotalAmountOfGoodsOnShelf"></p>
                                </div>
                            </div>
                        </a>
                    </td>
                    <td class="table-tr-td">
                        <a>
                            <div class="list2" style="border: 1px #DCDCDC solid; width: 290px; height: 100px;margin-left:44px">
                                <div>
                                    <div class="td-a-div" style="height: 50px; width: 50px; float: left; margin-left: 20px;margin-top: 20px"><i style="font-size: 60px; color: #1ABC9C; " class="layui-icon layui-icon-praise"></i></div>
                                    <div style="align-content: center; float: left; margin-left:40px; margin-top: 35px;">
                                        <p>商品销售总量</p>
                                        <p id="TotalProductSales"></p>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </td>
                </tr>
            </table>
        </div>
        <div class="box1-box2">
            <table>
                <tr>
                    <td class="box1-box2-table-tr-td">
                        <div>
                            <div class="box1-box2-table-tr-td-div" >
                                <div style="line-height: 40px ;height: 50px; float: left; background-color: #F3F3F3; width: 1300px;border-bottom: 1px #DCDCDC solid;font-size:17px;line-height: 50px;text-indent: 20px;font-weight: 800" >
                                    待处理事务
                                </div>
                                <div style="width: 30%; height: 40px; border-bottom: 1px silver solid;float: left; margin-left: 40px;margin-top: 10px;display: none;" id="productBox">
                                    <a href="javascript:;" class="pendingTransaction" ><span class="pendingTransactionText" style="float: left; align-content: center; font-size: 15px;  padding-top: 10px;">商品待审核信息</span><span style="color: red;float: right;align-content: center; font-size: 15px; padding-top: 10px;" id="productExmaine"></span></a>
                                </div>
                                <div style="width: 30%; height: 40px; border-bottom: 1px silver solid;float: left; margin-left: 40px;margin-top: 10px;display: none;" id="courseBox">
                                    <a href="javascript:;" class="pendingTransaction" ><span class="pendingTransactionText" style="float: left; align-content: center; font-size: 15px;  padding-top: 10px;">课程待审核信息</span><span style="color: red;float: right;align-content: center; font-size: 15px; padding-top: 10px;" id="courseExmaine"></span></a>
                                </div>
                                <div style="width: 30%; height: 40px; border-bottom: 1px silver solid;float: left; margin-left: 40px;margin-top: 10px;display: none;" id="microcircleBox">
                                    <a href="javascript:;" class="pendingTransaction" ><span class="pendingTransactionText" style="float: left; align-content: center; font-size: 15px;  padding-top: 10px;">微圈待审核信息</span><span style="color: red;float: right;align-content: center; font-size: 15px; padding-top: 10px;" id="microcircleExmaine"></span></a>
                                </div>
                                <div style="width: 30%; height: 40px; border-bottom: 1px silver solid;float: left; margin-left: 40px;margin-top: 10px;display: none;" id="orderBox">
                                    <a href="javascript:;" class="pendingTransaction" ><span class="pendingTransactionText" style="float: left; align-content: center; font-size: 15px;  padding-top: 10px;">订单待处理信息</span><span style="color: red;float: right;align-content: center; font-size: 15px; padding-top: 10px;" id="orderExmaine"></span></a>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <div  class="box3" style="margin-top: 30px; border: 1px #DCDCDC solid; width: 1302px;height: 250px;">
            <div>
                <table>
                    <tr>
                        <td>
                            <div style="width: 1302px;background-color: #F3F3F3; height: 50px; line-height: 50px; border-bottom:1px #DCDCDC solid;  ">
                                <span style="margin-left: 20px;font-size:17px;line-height: 50px;font-weight: 800">运营快捷入口</span>
                            </div>
                        </td>
                    </tr>
                </table>
                <table>
                    <tr>
                        <td class="td">
                            <a>
                                <div class="box3-tab-tr-td-a-div">
                                    <i class="layui-icon layui-icon-set" style="font-size: 90px; color: #1ABC9C;" ></i>
                                    <p style="margin-left: 15px;line-height: 50px" >课程列表</p>
                                </div>
                            </a>
                        </td>
                        <td class="td">
                            <a>
                                <div class="box3-tab-tr-td-a-div">
                                    <i class="layui-icon layui-icon-dialogue" style="font-size: 90px; color: #1ABC9C;" ></i>
                                    <p style="margin-left: 15px;line-height: 50px" >课程审核</p>
                                </div>
                            </a>
                        </td>
                        <td class="td">
                            <a>
                                <div class="box3-tab-tr-td-a-div">
                                    <i class="layui-icon layui-icon-reply-fill" style="font-size: 90px; color: #1ABC9C;" ></i>
                                    <p style="margin-left: 15px;line-height: 50px" >微圈列表</p>
                                </div>
                            </a>
                        </td>
                        <td class="td">
                            <a>
                                <div class="box3-tab-tr-td-a-div">
                                    <i class="layui-icon layui-icon-template-1" style="font-size: 90px; color: #1ABC9C;"></i>
                                    <p style="margin-left: 15px;line-height: 50px" >微圈审核</p>
                                </div>
                            </a>
                        </td>
                        <td class="td">
                            <a>
                                <div class="box3-tab-tr-td-a-div">
                                    <i class="layui-icon layui-icon-group" style="font-size: 90px; color: #1ABC9C; " ></i>
                                    <p style="margin-left: 35px;line-height: 50px" >商品列表</p>
                                </div>
                            </a>
                        </td>
                        <td class="td">
                            <a>
                                <div class="box3-tab-tr-td-a-div">
                                    <i class="layui-icon layui-icon-search" style="font-size: 90px; color: #1ABC9C;" ></i>
                                    <p style="margin-left: 20px;line-height: 50px" >商品审核</p>
                                </div>
                            </a>
                        </td>
                        <td class="td">
                            <a>
                                <div class="box3-tab-tr-td-a-div">
                                    <i class="layui-icon layui-icon-search" style="font-size: 90px; color: #1ABC9C;" ></i>
                                    <p style="margin-left: 20px;line-height: 50px" >课程订单</p>
                                </div>
                            </a>
                        </td>
                        <td class="td">
                            <a>
                                <div class="box3-tab-tr-td-a-div">
                                    <i class="layui-icon layui-icon-chart-screen" style="font-size: 90px; color: #1ABC9C;" ></i>
                                    <p style="margin-left: 20px;line-height: 50px" >商品订单</p>
                                </div>
                            </a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="box4" style="margin-top: 30px;  width: 1305px;height: 240px;">
            <table>
                <tr>
                    <td class="box4-tab-tr-td">
                        <div>
                            <div class="box4-tab-tr-td-div">
                                <span style="margin-left: 15px;font-weight: 600;font-size: 15px;">课程总览</span>
                            </div>
                            <div>
                                <div class="box4-tab-tr-td-div-div">
                                    <span style="margin-left: 30px; color: red; font-size: 35px;" id="CourseCount"></span>
                                    <p style="line-height: 30px">课程数量(已上架)</p>
                                </div>
                                <div class="box4-tab-tr-td-div-div">
                                    <span style="margin-left: 40px; color: red; font-size: 35px;" id="CourseFabulousCount"></span>
                                    <p style="line-height: 30px">课程点赞数量</p>
                                </div>
                            </div>
                        </div>
                    </td>
                    <td style="width: 20px;">

                    </td>
                    <td class="box4-tab-tr-td" style="margin-left: 25px">
                        <div>
                            <div class="box4-tab-tr-td-div">
                                <span style="margin-left: 15px;font-weight: 600;font-size: 15px;">商品总览</span>
                            </div>
                            <div>
                                <div>
                                    <div class="box4-tab-tr-td-div-div-div-div">
                                        <span style="margin-left: 20px; color: red; font-size: 35px;" id="ProductCount"></span>
                                        <p style="line-height: 30px">商品数量</p>
                                    </div>
                                    <div class="box4-tab-tr-td-div-div-div-div">
                                        <span style="margin-left: 20px; color: red; font-size: 35px;" id="TotalProductSales2"></span>
                                        <p style="line-height: 30px">商品销售总量</p>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <div>
            <table>
                <tr>
                    <td>
                        <!--课程统计-->
                        <div style="width: 1302px; height: 400px; border: 1px #DCDCDC solid; margin-top: 20px;">
                            <div style="line-height: 40px ;height: 40px; float: left; background-color: #F3F3F3; width: 100%;font-size: 15px; border-bottom: silver 1px solid;font-weight: 600;text-indent: 20px">
                                课程统计
                            </div>
                            <div style="height: 400px; width: 100%;">
                                <div style="width: 150px; height: 200px; margin-top: 95px; float: left;margin-left: 55px; border-right: silver dashed 1px">
                                    <div>
                                        <p  style="font-size:13px">新增课程统计</p>
                                        <p style="font-size: 27px;margin-top: 5px" id="courseNewIncrease"></p>
                                        <span style="color: #00FF00" id="courseLastMonth"></span><span style="font-size: 14px;margin-left: 20px">同比上月</span>
                                    </div>
                                </div>
                                <div style="height: 90px;width: 200px; float: right;  text-align: center; margin-top: 20px;margin-right: 100px">
                                    <a onclick="CourseCensus()"><span class="time" style="font-size: 15px">课程统计</span></a>
                                    <a onclick="ProductCensus()"><span class="time" style="font-size: 15px;margin-left: 50px">商品统计</span></a>
                                </div>
                                <div id="main" style="width: 1060px; height: 320px;float: left;margin-top: -70px">

                                </div >
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
</body>

<script src="/echarts/echarts.js"></script>
<!--<script src="/js/index/systemHome/systemHome/index-welcome.js"></script>-->
<script>
    var thisday=[];
    var thisweek=[];
    var thismonth=[];

    layui.use(['layer','laydate','jquery'],function () {
        var layer = layui.layer;
        var laydate = layui.laydate;
        var $ = layui.jquery;

        refresh=function refresh(){
            location.reload();
        }

        //快捷入口点击
        $('.box3-tab-tr-td-a-div').click(function () {
            parent.$('#quickEntry').val($(this).children('p').text());
            parent.quickEntry();
        })

        //待处理事务
        $('.pendingTransaction').click(function () {
            var pendingTransactionText = $(this).children('.pendingTransactionText').text();
            if(pendingTransactionText == '商品待审核信息'){
                pendingTransactionText = '商品审核列表'
            }else if(pendingTransactionText == '课程待审核信息'){
                pendingTransactionText = '课程审核列表'
            }else if(pendingTransactionText == '微圈待审核信息'){
                pendingTransactionText = '微圈审核列表'
            }
            parent.$('#quickEntry').val(pendingTransactionText);
            parent.quickEntry();
        });

        //视频的上传数
        $.ajax({
            url:"/indexWelcome/getJsCourseCount",
            data:{},
            type:"post",
            dataType:"json",
            success:function (data) {
               $('#JsCourseCount').text(data);
            }
        })
        //李佳豪
        //上架商品总量
        $.ajax({
            url:"/product/getAllProductUpperCount",
            data:{},
            type:"post",
            dataType:"json",
            success:function (data) {
                $('#TotalAmountOfGoodsOnShelf').text(data.data);
            }
        });
        //上传视频总量（上传课程审核成功总量） TotalVideoOverhead
        $.ajax({
            url:"/course/getAllCourseUpperCount",
            data:{},
            type:"post",
            dataType:"json",
            success:function (data) {
                $('#TotalVideoOverhead').text(data.data);
            }
        });
        //发布微圈总数    TotalNumberOfPublishedMicrocircles
        $.ajax({
            url:"/course/getAllCourseUpperCount",
            data:{},
            type:"post",
            dataType:"json",
            success:function (data) {
                $('#TotalVideoOverhead').text(data.data);
            }
        });
        //视频的视频收藏、浏览、点赞数
        $.ajax({
            url:"/indexWelcome/getJsCourseCollect",
            data:{},
            type:"post",
            dataType:"json",
            success:function (data) {
                var num=data.data;
                var collectNumber=0;
                var likeNumber=0;
                var lookNumber=0;
                for(var i=0;i<num.length;i++){
                    collectNumber+=num[i].collectNum;
                    likeNumber+=num[i].likeNum;
                    lookNumber+=num[i].lookNum;
                }
                $('#lookNum').text(lookNumber);
                $('#likeNum').text(likeNumber);
                $('#collectNum').text(collectNumber);
            }
        })

        //视频的上架数
        $.ajax({
            url:"/indexWelcome/getCourseCount",
            data:{},
            type:"post",
            dataType:"json",
            success:function (data) {
                $('#CourseCount').text(data);
            }
        })

        //商品的上架数
        $.ajax({
            url:"/indexWelcome/getProductCount",
            data:{},
            type:"post",
            dataType:"json",
            success:function (data) {
                $('#ProductCount').text(data);
            }
        })

        //用户总数
        $.ajax({
            url:"/indexWelcome/getUserCount",
            data:{},
            type:"post",
            dataType:"json",
            success:function (data) {
                $('#UserCount').text(data);
            }
        })

        //用户新增数
        $.ajax({
            url:"/indexWelcome/getJsBeforeUserCount",
            data:{},
            type:"post",
            dataType:"json",
            success:function (data) {
                var userCount=data.data;
                $('#todayUser').text(userCount[0]);
                $('#yesterdayUser').text(userCount[1]);
                $('#monthUser').text(userCount[2]);
            }
        })

        //本月课程新增与上月新增比例
        $.ajax({
            url:"/indexWelcome/getJsCourse",
            data:{},
            type:"post",
            dataType:"json",
            success:function (data) {
                var userCount=data.data;
                $('#courseMonth').text(userCount[0]);
                //本月与上月课程新增比例
                $.ajax({
                    url:"/indexWelcome/getLastJsCourse",
                    data:{},
                    type:"post",
                    dataType:"json",
                    success:function (data) {
                        var courseLastCount=data.data;
                        if(userCount[0]==0){
                            $('#courseLastMonth').text('-'+courseLastCount[0]*100+'%');
                        }else if(courseLastCount[0]==0){
                            $('#courseLastMonth').text(userCount[0]*100+'%');
                        }else if((100 * (1 - userCount[0] / courseLastCount[0])).toFixed(2)>1){
                            $('#courseLastMonth').text((100 * (1 - userCount[0] / courseLastCount[0])).toFixed(2)+'%');
                        }else if((100 * (1 - userCount[0] / courseLastCount[0])).toFixed(2)<1){
                            $('#courseLastMonth').text('-'+(100 * (1 - userCount[0] / courseLastCount[0])).toFixed(2)+'%' && 1 - userCount[0] / courseLastCount[0]!=0);
                        }else{
                            $('#courseLastMonth').text('0%');
                        }
                    }
                })
            }
        })

        //本月申请新增与上月新增比例
        $.ajax({
            url:"/indexWelcome/getJsApplyRecord",
            data:{},
            type:"post",
            dataType:"json",
            success:function (data) {
                var applyCount=data.data;
                $('#applyCount').text(applyCount[0]);
                //本月与上月申请新增比例
                $.ajax({
                    url:"/indexWelcome/getLastJsApplyRecord",
                    data:{},
                    type:"post",
                    dataType:"json",
                    success:function (data) {
                        var applyLastCount=data.data; if(applyCount[0]==0){
                            $('#applyLastMonth').text('-'+applyLastCount[0]*100+'%');
                        }else if(applyLastCount[0]==0){
                            $('#applyLastMonth').text(applyCount[0]*100+'%');
                        }else if((100 * (1 - applyCount[0] / applyLastCount[0])).toFixed(2)>1){
                            $('#applyLastMonth').text((100 * (1 - applyCount[0] / applyLastCount[0])).toFixed(2)+'%');
                        }else if((100 * (1 - applyCount[0] / applyLastCount[0])).toFixed(2)<1 && 1 - applyCount[0] / applyLastCount[0]!=0){
                            $('#applyLastMonth').text('-'+(100 * (1 - applyCount[0] / applyLastCount[0])).toFixed(2)+'%');
                        }else{
                            $('#applyLastMonth').text('0%');
                        }
                    }
                })
            }
        })
        var three;
        var six;
        var nine;
        var twelve;
        var fifteen;
        var eighteen;
        var twentyOne;
        //今日课程图表
        $.ajax({
            url:"/indexWelcome/getTodayJsBeforeUserCount",
            data:{},
            type:"post",
            dataType:"json",
            success:function (data) {
                var todayCourse=data.data;
                three=todayCourse[0];
                six=todayCourse[1];
                nine=todayCourse[2];
                twelve=todayCourse[3];
                fifteen=todayCourse[4];
                eighteen=todayCourse[5];
                twentyOne=todayCourse[6];
                thisday=[three,six,nine,twelve,fifteen,eighteen,twentyOne];
                day();
            }
        })

        var monday=0;
        var tuesday=0;
        var wednesday=0;
        var thursday=0;
        var friday=0;
        var saturday=0;
        var sunday=0;
        //本周课程图表
        $.ajax({
            url:"/indexWelcome/getWeekJsBeforeUserCount",
            data:{},
            type:"post",
            dataType:"json",
            success:function (data) {
                var weekCourse=data.data;
                monday=weekCourse[0];
                tuesday=weekCourse[1];
                wednesday=weekCourse[2];
                thursday=weekCourse[3];
                friday=weekCourse[4];
                saturday=weekCourse[5];
                sunday=weekCourse[6];
                thisweek=[monday,tuesday,wednesday,thursday,friday,saturday,sunday];
            }
        })

        var oneSix=0;
        var sevenTwelve=0;
        var thirteenEighteen=0;
        var nineteenTetracosa=0;
        var twentyFive=0;
        var thirty=0;
        //本月课程图表
        $.ajax({
            url:"/indexWelcome/getMonthJsBeforeUserCount",
            data:{},
            type:"post",
            dataType:"json",
            success:function (data) {
                var monthCourse=data.data;
                oneSix=monthCourse[0];
                sevenTwelve=monthCourse[1];
                thirteenEighteen=monthCourse[2];
                nineteenTetracosa=monthCourse[3];
                twentyFive=monthCourse[4];
                thirty=monthCourse[5];
                thismonth=[oneSix,sevenTwelve,thirteenEighteen,nineteenTetracosa,twentyFive,thirty];
            }
        })

        //商品待审核数量
        $.ajax({
            url:"/indexWelcome/getJsProductRecord",
            data:{},
            type:"post",
            dataType:"json",
            success:function (data) {
                if(data!=0){
                    $('#productBox').css('display','block');
                    $('#productExmaine').text('('+data+')');
                }
            }
        })

        //视频待审核数量
        $.ajax({
            url:"/indexWelcome/getJsCourseRecord",
            data:{},
            type:"post",
            dataType:"json",
            success:function (data) {
                if(data!=0){
                    $('#courseBox').css('display','block');
                    $('#courseExmaine').text('('+data+')');
                }
            }
        })

        //微圈待审核数量
        $.ajax({
            url:"/indexWelcome/getJsMicrocircleRecord",
            data:{},
            type:"post",
            dataType:"json",
            success:function (data) {
                if(data!=0){
                    $('#microcircleBox').css('display','block');
                    $('#microcircleExmaine').text('('+data+')');
                }
            }
        })

    })

    function day(){
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            xAxis: {
                type: 'category',
                data: ['3:00', '6:00', '9:00', '12:00', '15:00', '18:00', '21:00']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: thisday,
                    type: 'line'
                }
            ]
        };

        option && myChart.setOption(option);
    }

    function week() {
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            xAxis: {
                type: 'category',
                data: ['一', '二', '三', '四', '五', '六', '日']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: thisweek,
                    type: 'line'
                }
            ]
        };

        option && myChart.setOption(option);
    }

    function month(){
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            xAxis: {
                type: 'category',
                data: ['1~6', '7~12', '13~18', '19~24','25~29','30~31']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data:thismonth,
                    type: 'line'
                }
            ]
        };

        option && myChart.setOption(option);
    }

</script>
</html>